<template>
	<view>
		<view class="out-border-line column-middle" @click="turnAddress()">
			<view class="common-width90 flex-column">
				<view>
					<text class="default-address" v-if="orderList.info.type == 1">(默认地址)</text>
					<text class="default-address" v-if="orderList.info.type == 0"></text>
					<text class="campus">{{orderList.info.school}}</text>
				</view>
				<view class="flex-just column-middle">
					<text class="detail-address">{{orderList.info.address}}</text>
					<image class="icon-right" src="/static/center/turnRight.png"></image>
				</view>
				<view>
					<text class="default-address">{{orderList.info.name}}</text>
					<text class="campus">{{orderList.info.phone}}</text>
				</view>
			</view>
		</view>

		<view class="out-border-line flex-just" v-for="(item,index) in orderList.goodsInfoList" :key="index">
			<van-card :desc="item.goodsInfo.description" :title="item.goodsInfo.name" :thumb="item.goodsInfo.picture" class="card-box">
			</van-card>
			<view class="stepper-box">
				<text class="stepper-box-text1">￥{{item.goodsInfo.price}}</text>
				<text class="stepper-count">x{{item.total}}</text>
			</view>
		</view>

		<view class="bottom-out-box">
			<view class="common-width90 flex-just column-middle">
				<view></view>
				<text class="text">共{{orderList.total}}件物品，合计{{orderList.price}}元</text>
				<van-button round type="info" size="small" @click="summitOrder(orderList.orderId)">提交</van-button>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getNewOrderList,
		updateAddressStatus,
		updateOrderStatus
	} from '@/common/api/groceryStore/order.js'
	import {
		getAddressByAddressId
	} from '@/common/api/center/address.js'
	export default {
		data() {
			return {
				url: '/static/corporation/groceryStore/club_logo.jpg',
				orderList: [],
				updateAddressId: ''
			}
		},
		methods: {
			onClose(event) {
				// name为第几个滑动单元格的标志
				const {
					position,
					instance,
					name
				} = event.detail;
				switch (position) {
					case 'left':
					case 'cell':
						instance.close();
						break;
					case 'right':
						uni.showModal({
							// title: '提示',
							content: '确定删除吗？',
							success: function(res) {
								if (res.confirm) {
									console.log(name)
									console.log('用户点击确定');
									instance.close();
								} else if (res.cancel) {
									console.log('用户点击取消');
									instance.close();
								}
							}
						})
						break;
				}
			},
			// 获取最新的订单列表
			getNewOrderList: function() {
				getNewOrderList(uni.getStorageSync("memberId")).then(res => {
					if (res.data.code == 200) {
						if (res.data.data != null) {
							this.orderList = res.data.data
							console.log(this.orderList)
						}
					} else {
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						})
					}
				})
			},
			// 跳到地址列表选择地址
			turnAddress: function() {
				uni.navigateTo({
					url: '/pages/center/deliveryAddress/deliveryAddress?select=' + true
				})
			},
			// 当用户改变了地址的时候
			getAddressByAddressId: function(addressId) {
				uni.showLoading({
					title: '加载中'
				})
				getAddressByAddressId(addressId).then(res => {
					if (res.data.code == 200) {
						if (res.data.data != null) {
							this.orderList.info = res.data.data
							uni.hideLoading()
						}
					} else {
						uni.hideLoading()
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						})
					}
				})
			},
			// 修改地址状态
			updateAddressStatus: function(orderId,addressId) {
				updateAddressStatus(orderId, {
					addressId: addressId,
					status: 0
				}).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '提交成功'
						})
						uni.navigateTo({
							url: '/pagesA/pages/groceryStore/orderRecord/orderRecord'
						})
					} else {
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						})
					}
				})
			},
			// 修改订单状态
			updateOrderStatus:function(orderId){
				updateOrderStatus(orderId,0).then(res => {
					if (res.data.code == 200) {
						console.log("修改订单成功")
					} else {
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						})
					}
				})
			},
			// 提交订单
			summitOrder:function(orderId){
				// 当this.updateAddressId不为0的时候,为已经修改了地址,否则没有修改地址
				if(this.updateAddressId != ''){
					// 因为修改了地址之后会调用修改订单状态的方法,所以这里只需要调用一个方法
					this.updateAddressStatus(orderId,this.updateAddressId)
				} else{
					this.updateAddressStatus(orderId,this.orderList.info.id)
				}
			},
		},
		onLoad(e) {
			this.getNewOrderList()
			if (e.addressId != null) {
				this.getAddressByAddressId(e.addressId)
				this.updateAddressId = e.addressId
			}
		}
	}
</script>

<style>
	.default-address {
		width: 30%;
		height: 70rpx;
		font-size: 16px;
		font-weight: bold;
		line-height: 70rpx;
	}

	/* 校区 */
	.campus {
		width: 70%;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 16px;
		margin-left: 5%;
	}

	.detail-address {
		width: 80%;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 18px;
	}

	.icon-right {
		width: 40rpx;
		height: 40rpx;
	}

	.in-box {
		width: 100%;
		height: 100%;
		margin-top: 10rpx;
	}

	/* 卡片的box */
	.card-box {
		width: 60%;
		height: 100%;
	}

	/* 右侧的右上角的价钱和右下角的步进器 */
	.stepper-box {
		width: 30%;
		position: relative;
		border-bottom: 1px solid #FFFFFF;
	}

	.stepper-box-text1 {
		position: absolute;
		right: 40rpx;
		color: red;
		top: 10rpx;
	}

	.stepper-box van-stepper {
		position: absolute;
		bottom: 30rpx;
	}

	.stepper-count {
		position: absolute;
		top: 70rpx;
		right: 40rpx;
	}
</style>
